<template>
  <ConfigPersonInfo ref="configPersonInfo" @ConfigClick="select(form)"/>
  <el-container style="height: 700px">
    <el-main>
      <el-form ref="formRef" :inline="true" :model="form" class="form" label-position="right" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名:" prop="name">
              <el-input v-model="form.name" style="width: 180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职位:" prop="position">
              <el-select v-model="form.position" style="width: 180px">
                <el-option v-for="position in optionsPositions" :key="position.value" :label="position.label"
                           :value="position.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所在项目:" prop="inProject">
              <el-input v-model="form.inProject" style="width: 180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职级:" prop="level">
              <el-select v-model="form.level" style="width: 180px">
                <el-option v-for="level in optionsLevel" :key="level.value" :label="level.label" :value="level.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="当前状态:" prop="state">
              <el-input v-model="form.state" style="width: 180px"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="部门:" prop="department">
              <el-select v-model="form.department" style="width: 180px">
                <el-option v-for="department in optionsDepartment" :key="department.value" :label="department.label"
                           :value="department.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入职日期:" prop="date">
              <el-date-picker
                  v-model="form.date"
                  end-placeholder="End date"
                  format="YYYY/MM/DD"
                  range-separator="To"
                  start-placeholder="Start date"
                  type="daterange"
                  value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20" style="margin:0 auto 15px auto">
          <el-col :span="18">
          </el-col>
          <el-col :span="6">
            <el-button plain style="height: 40px;width: 100px;margin-right: 20px" type="info"
                       @click="resetForm(formRef)">重置
            </el-button>
            <el-button plain style="height: 40px;width: 100px" type="primary" @click="select(form)">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableData.slice((form.currentPage-1)*form.pagesize,
            form.currentPage*form.pagesize)"
                border
                max-height="463"
                style="width: 100%"
      >
        <el-table-column label="ID" prop="id" sortable width="70"/>
        <el-table-column label="姓名" prop="name" sortable width="120"/>
        <el-table-column label="职位" prop="position" sortable width="200"/>
        <el-table-column label="状态" prop="state" sortable width="200"/>
        <el-table-column label="所在项目" prop="inProject" width="200"/>
        <el-table-column label="入职日期" prop="userEntryTimeFormating" sortable width="150"/>
        <el-table-column label="部门" prop="department" width="150"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          :current-page="form.currentPage"
          :total="tableData.length"
          background
          layout="prev, pager, next"
          style="margin-top: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {usePositionStore} from '@/stores/Person/Position'
import {useLevelStore} from '@/stores/Person/Level'
import {useDepartmentStore} from '@/stores/Person/Department'
import {usePersonSelectForm} from '@/stores/PersonSelect/PersonSelectForm'

import type {FormInstance} from 'element-plus'
import ConfigPersonInfo from "@/components/home/body/person/ConfigPersonInfo.vue";
import {selectPersonApi} from "@/api/PersonSelect";
import {deleteUserApi} from "@/api/User";

const PositionStore = usePositionStore()
const LevelStore = useLevelStore()
const DepartmentStore = useDepartmentStore()
const PersonSelectForm = usePersonSelectForm()

//表单接口初始化
interface form {
  id: number
  level: string
  name: string
  position: string
  state: string
  inProject: string
  date: []
  userEntryTime: string
  department: string
}


const ConfigClick: any = ref(null);
const formRef = ref<FormInstance>()
const configPersonInfo: any = ref()

//抽屉按钮
const OpenForm = (index: number, row: form) => {
  PersonSelectForm.createdForm(row)
  configPersonInfo.value.OpenDrawer()
}


//按键方法实现
//分页实现
const handleCurrentChange = (currentPage: number) => {
  form.currentPage = currentPage
}
//页面大小固定为<10
const handleSizeChange = (size: number) => {
  form.pagesize = size
}
//编辑
const handleEdit = (index: number, row: form) => {
  //展示编辑页面
  OpenForm(index, row)
  //完成后将数据传给后端
}
//清空查询
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  //表格恢复初始状态(ALL表单)
}


//删除数据
const handleDelete = (index: number, row: form) => {
  //删除员工接口
  deleteUserApi(row.id, 1).then(res => {

  })
  //删除数据
  tableData.value.splice(index, 1)

}

//模糊查询选择器
const select = (form) => {
  selectPersonApi(form.name, form.position, form.inProject, form.level, form.date[0], form.date[1], form.state, form.department)
      .then(response => {
        tableData.value = []
        for (let i = 0; i < response["data"].length; i++) {
          tableData.value.push({
            id: response["data"][i].userId,
            name: response["data"][i].userName,
            position: response["data"][i].positionName,
            state: response["data"][i].stateName,
            userEntryTime: response["data"][i].userEntryTime,
            userEntryTimeFormating: response["data"][i].userEntryTime.substring(0, 10),
            department: response['data'][i].departmentName,
            inProject: response['data'][i].projectName
          })
        }
      })
}


//选择器&分页参数构造
const form = reactive({
  pagesize: 10,
  currentPage: 1,
  id: '',
  name: '',
  level: '',
  position: "",
  state: '',
  inProject: '',
  date: [],
  department: '',
  phone: '',
  email: ''
})


let tableData = ref([])


// //初始化
// // 创建后生成
select(form)
//表单数据绑定
const optionsPositions = PositionStore.positions
const optionsLevel = LevelStore.levels
const optionsDepartment = DepartmentStore.departments
</script>

<style scoped>
.form {
  margin-top: 2px;
}

.el-row {
  height: 40px;
  margin-bottom: 0;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>